// 籍祥供应链系统 - 全局样式重置与通用类
// ==============================================

// 重置样式
* {
  box-sizing: border-box;

  &::before,
  &::after {
    box-sizing: border-box;
  }
}

html {
  height: 100%;
  font-size: 14px;
  // 移动端文本缩放控制
  -webkit-text-size-adjust: 100%; // Safari, iOS, Chrome
  text-size-adjust: 100%; // 标准属性 (Edge, Chrome, Opera)
  -webkit-tap-highlight-color: transparent;
}

body {
  height: 100%;
  margin: 0;
  padding: 0;
  color: #e2e8f0;
  background: #0f1421;
  font: 1em/1.6 'PingFang SC', 'Microsoft Yahei', 'Segoe UI', 'Helvetica Neue',
    'Avenir', 'Hiragino Sans GB', 'STHeiti', 'WenQuanYi Micro Hei',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-user-select: none; // Safari, iOS
  -moz-user-select: none; // Firefox
  -ms-user-select: none; // IE 10+
  user-select: none; // 标准属性
}

// 重置元素边距
body,
ul,
h1,
h2,
h3,
h4,
h5,
h6,
p,
dl,
dd {
  padding: 0;
  margin: 0;
}

// 链接样式
a {
  text-decoration: none;
  color: #00d4ff;
  outline: none;
  transition: color 0.3s ease;

  &:hover {
    color: #00ff88;
  }

  &:focus-visible {
    outline: 2px solid #00d4ff;
    outline-offset: 2px;
  }
}

// 字体样式
i {
  font-style: normal;
}

// 输入框样式
input[type='text'],
input[type='search'],
input[type='password'],
input[type='checkbox'],
textarea {
  padding: 8px 12px;
  outline: none;
  border: 1px solid #2d3746;
  border-radius: 6px;
  background: #1a2235;
  color: #e2e8f0;
  transition: all 0.3s ease;

  &:focus {
    border-color: #00d4ff;
    box-shadow: 0 0 0 2px rgba(0, 212, 255, 0.1);
  }

  &::placeholder {
    color: #8a9ba8;
  }
}

// 图片样式
img {
  max-width: 100%;
  max-height: 100%;
  vertical-align: middle;
  background: #1a2235 url('@/assets/images/200.png') no-repeat center / contain;
  border-radius: 4px;
}

// 列表样式
ul {
  list-style: none;
}

// 应用根元素
#app {
  background: #0f1421;
  -webkit-user-select: none; // Safari, iOS
  -moz-user-select: none; // Firefox
  -ms-user-select: none; // IE 10+
  user-select: none; // 标准属性
  height: 100%;
  margin: 0;
  padding: 0;
  min-width: 1280px;
}

// 布局容器
.container {
  width: 1240px;
  margin: 0 auto;
  position: relative;

  @media (max-width: 1280px) {
    width: 100%;
    padding: 0 20px;
  }
}

// 文字截断
.ellipsis {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.ellipsis-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2; // Webkit 前缀
  line-clamp: 2; // 标准属性
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
}

// 浮动布局
.fl {
  float: left;
}

.fr {
  float: right;
}

.clearfix {
  &::after {
    content: '';
    display: table;
    clear: both;
  }
}

// Flex 布局工具类
.flex {
  display: flex;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flex-column {
  display: flex;
  flex-direction: column;
}

// 间距工具类
.mt-10 { margin-top: 10px; }
.mb-10 { margin-bottom: 10px; }
.ml-10 { margin-left: 10px; }
.mr-10 { margin-right: 10px; }

.mt-20 { margin-top: 20px; }
.mb-20 { margin-bottom: 20px; }
.ml-20 { margin-left: 20px; }
.mr-20 { margin-right: 20px; }

.p-10 { padding: 10px; }
.p-20 { padding: 20px; }

// 文字颜色
.text-primary { color: #00d4ff; }
.text-success { color: #00ff88; }
.text-warning { color: #ffb300; }
.text-danger { color: #ff2e63; }
.text-muted { color: #8a9ba8; }

// 允许选择的文本类
.selectable {
  -webkit-user-select: text; // Safari, iOS
  -moz-user-select: text; // Firefox
  -ms-user-select: text; // IE 10+
  user-select: text; // 标准属性
}

.select-all {
  -webkit-user-select: all; // Safari, iOS
  -moz-user-select: all; // Firefox
  -ms-user-select: all; // IE 10+
  user-select: all; // 标准属性
}

// 背景颜色
.bg-dark { background: #1a2235; }
.bg-darker { background: #0f1421; }

// 科技感特效类
.glow-primary {
  box-shadow: 0 0 10px rgba(0, 212, 255, 0.3);
}

.glow-success {
  box-shadow: 0 0 10px rgba(0, 255, 136, 0.3);
}

.tech-border {
  border: 1px solid #2d3746;
  border-radius: 8px;
}

.tech-card {
  background: #1a2235;
  border: 1px solid #2d3746;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

// ==============================================
// Element Plus 组件样式重置
// ==============================================

.el-breadcrumb {
  margin-bottom: 20px;

  &__inner {
    &.is-link {
      font-weight: 400 !important;
      color: #8a9ba8;

      &:hover {
        color: #00d4ff;
      }
    }
  }
}

.el-card {
  margin: 8px;
  background: #1a2235;
  border: 1px solid #2d3746;
  border-radius: 8px;

  &__header {
    padding: 16px 20px;
    border-bottom: 1px solid #2d3746;
    background: rgba(0, 0, 0, 0.1);
  }
}

.el-table {
  font-size: 12px;
  background: transparent;
  color: #e2e8f0;

  th {
    background: #1a2235;
    color: #b0bac9;
    border-bottom: 1px solid #2d3746;
  }

  td {
    border-bottom: 1px solid #2d3746;
  }

  &.el-table--striped .el-table__body tr.el-table__row--striped td {
    background: rgba(26, 34, 53, 0.5);
  }

  .el-table__row:hover > td {
    background: rgba(0, 212, 255, 0.08) !important;
  }
}

.el-pagination {
  margin-top: 20px;
  justify-content: flex-end;

  .btn-prev,
  .btn-next,
  .number {
    background: #1a2235;
    border: 1px solid #2d3746;
    color: #b0bac9;

    &:hover {
      color: #00d4ff;
      border-color: #00d4ff;
    }

    &.active {
      background: #00d4ff;
      border-color: #00d4ff;
      color: #0f1421;
    }
  }
}

// 滚动条样式
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: #1a2235;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb {
  background: #2d3746;
  border-radius: 3px;

  &:hover {
    background: #00d4ff;
  }
}

// 打印样式
@media print {
  * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

// ==============================================
// 响应式设计
// ==============================================

// 响应式断点
$breakpoint-sm: 640px;
$breakpoint-md: 768px;
$breakpoint-lg: 1024px;
$breakpoint-xl: 1280px;
$breakpoint-2xl: 1536px;

// 响应式混合器
@mixin mobile {
  @media (max-width: #{$breakpoint-md - 1px}) {
    @content;
  }
}

@mixin tablet {
  @media (min-width: #{$breakpoint-md}) and (max-width: #{$breakpoint-lg - 1px}) {
    @content;
  }
}

@mixin desktop {
  @media (min-width: #{$breakpoint-lg}) {
    @content;
  }
}

@mixin large-desktop {
  @media (min-width: #{$breakpoint-xl}) {
    @content;
  }
}

// 移动端优化
@include mobile {
  html {
    font-size: 12px;
  }

  body {
    min-width: unset;
  }

  #app {
    min-width: unset;
  }
}

// 防止移动端缩放
input, textarea, select {
  font-size: 16px; // 防止iOS缩放
}

// 触摸设备优化
@media (hover: none) and (pointer: coarse) {
  .el-button {
    min-height: 44px; // 满足触摸目标最小尺寸
  }

  .el-input {
    font-size: 16px; // 防止iOS缩放
  }
}

// 高分辨率屏幕优化
@media (min-resolution: 2dppx) {
  // 为高分辨率屏幕提供更清晰的样式
}

// 深色模式支持
@media (prefers-color-scheme: dark) {
  // 系统级深色模式适配
}
